<template>
  <primitive :object="material" attach="material" :dispose="null" />
</template>

<script setup lang="ts">
import { computed, onUnmounted, watch } from 'vue'
import * as THREE from 'three'
import { CarPaintMaterial as CarPaintMaterialImpl } from './CarPaintMaterial'

interface Props {
  baseMaterial?: THREE.MeshPhysicalMaterial
  color?: string
  colorFlakes?: string
  colorPerl?: string
}

const props = withDefaults(defineProps<Props>(), {
  color: '#ff61bd',
  colorFlakes: '#ffbde3',
  colorPerl: '#ffbde3'
})

const material = computed(() => new CarPaintMaterialImpl(props.baseMaterial))

onUnmounted(() => {
  material.value.dispose()
})

watch(() => [props.color, props.colorFlakes, props.colorPerl], () => {
  material.value.setColors(props.color, props.colorPerl, props.colorFlakes)
}, { immediate: true })
</script>
